<template>
  <view class="video-page">
    <search-bar placeholder="搜索视频..." @search="handleSearch" />
    
    <swiper 
      class="video-swiper" 
      :vertical="true" 
      :duration="300"
      @change="handleSwiperChange"
    >
      <swiper-item v-for="video in filteredVideos" :key="video.id">
        <video-card 
          :video="video"
          @like="handleLike"
          @comment="handleComment"
          @share="handleShare"
        />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import SearchBar from '../../components/SearchBar.vue'
import VideoCard from '../../components/VideoCard.vue'

const searchKeyword = ref('')

// 假数据
const videos = ref([
  {
    id: 1,
    title: 'Vue3 响应式原理讲解',
    author: '前端大神',
    avatar: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=张',
    videoUrl: 'https://via.placeholder.com/400x600/000000/ffffff?text=视频1',
    likes: 1234,
    comments: 89,
    shares: 45,
    isLiked: false,
    description: '深入浅出讲解Vue3的响应式原理，帮你彻底理解框架底层'
  },
  {
    id: 2,
    title: 'UI设计趋势分析',
    author: '设计师小李',
    avatar: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=李',
    videoUrl: 'https://via.placeholder.com/400x600/000000/ffffff?text=视频2',
    likes: 2156,
    comments: 156,
    shares: 78,
    isLiked: true,
    description: '2024年最新UI设计趋势，让你的设计更有竞争力'
  },
  {
    id: 3,
    title: '营销策略实战案例',
    author: '营销达人',
    avatar: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=王',
    videoUrl: 'https://via.placeholder.com/400x600/000000/ffffff?text=视频3',
    likes: 987,
    comments: 234,
    shares: 123,
    isLiked: false,
    description: '真实案例分析，教你如何制定有效的营销策略'
  }
])

const filteredVideos = computed(() => {
  if (!searchKeyword.value) return videos.value
  return videos.value.filter(video => 
    video.title.includes(searchKeyword.value) ||
    video.author.includes(searchKeyword.value)
  )
})

const handleSearch = (keyword) => {
  searchKeyword.value = keyword
}

const handleSwiperChange = (e) => {
  // 处理视频切换逻辑
}

const handleLike = (videoId) => {
  const video = videos.value.find(v => v.id === videoId)
  if (video) {
    video.isLiked = !video.isLiked
    video.likes += video.isLiked ? 1 : -1
  }
}

const handleComment = (videoId) => {
  uni.showToast({ title: '评论功能', icon: 'none' })
}

const handleShare = (videoId) => {
  const video = videos.value.find(v => v.id === videoId)
  if (video) {
    video.shares += 1
    uni.showToast({ title: '分享成功', icon: 'success' })
  }
}
</script>

<style scoped>
.video-page {
  background: #000;
  min-height: 100vh;
}
.video-swiper {
  height: calc(100vh - 120rpx);
}
</style>
